import React from 'react';
import { Table, Button, Popconfirm, Divider } from 'antd';
import styles from '../index.less';
import { connect } from 'umi';
import UploadUtil from '../../UploadUtil'

class ModelList extends React.Component {
  state = {
    selectedRowKeys: [],
    loading: false,
    data: [],
  };
  componentDidMount() {
    this.fetchData();
  }
  start = () => {
    this.setState({ loading: true });
    this.fetchData();
  };
  handlerAdd = () => {
    this.props.switchModal(true);
    this.props.dispatch({
      type: "Module/setCurrent",
      payload: {},
    });
  }
  onSelectChange = (selectedRowKeys) => {
    console.log('selectedRowKeys changed: ', selectedRowKeys);
    this.setState({ selectedRowKeys });
  };
  fetchData = () => {
    this.props.dispatch({
      type: "CrudModel/getAll",
      payload: { SkipCount: 0, MaxResultCount: 100 },
      control: 'Module',
    }).then(() => {
      var resp = this.props.response.result;
      if (resp) {
        var data = resp.items;
        this.setState({ loading: false, data });
      }
    });
  }
  handleDelete = () => { }
  handleEdit = (obj) => {
    this.props.switchModal(true);
    this.props.dispatch({
      type: "Module/setCurrent",
      payload: obj,
    });
  }
  render() {
    const { loading, selectedRowKeys } = this.state;
    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange,
    };
    const hasSelected = selectedRowKeys.length > 0;
    const columns = [
      {
        dataIndex: 'logo',
        width: 80,
        render: (text) => (
          text ? (<img style={{ width: 36, height: 36 }} src={UploadUtil.imgServ + text} />) : null
        ),
      },
      {
        title: '应用名称',
        dataIndex: 'moduleName',
      },
      {
        title: '类型',
        dataIndex: 'moduleType',
      },
      {
        title: '应用路径',
        dataIndex: 'modulePath',
        render: (text) => <a href={text} target="_blank">转到</a>
      },
      {
        title: '操作',
        render: (record) =>
          this.state.data.length >= 1 ? (
            <span>
              <Popconfirm title="确定删除?" onConfirm={() => this.handleDelete(record.id)}>
                <a>删除</a>
              </Popconfirm>
              <Divider type="vertical" />
              <a onClick={() => this.handleEdit(record)}>编辑</a>
            </span>
          ) : null,
      },
    ];
    return (
      <div>
        <div className={styles.botspace}>
          <Button type="primary"
            onClick={this.start}
            loading={loading}
            className={styles.rgtspace}>刷新</Button>
          <Button type="primary" onClick={this.handlerAdd} className={styles.rgtspace}>添加应用</Button>
          <span style={{ marginLeft: 8 }}>
            {hasSelected ? `选择了 ${selectedRowKeys.length} 项` : ''}
          </span>
        </div>
        <Table rowKey="id" loading={loading} rowSelection={rowSelection} columns={columns} dataSource={this.state.data} />
      </div>
    );
  }
}

export default connect(({ user, CrudModel, Module }) => ({
  currentUser: user.currentUser,
  response: CrudModel.response,
  current: Module.current,
}))(ModelList);